<!--
 * @author: sanbao
 * @Date: 2022-08-06 16:19:03
-->
<style lang='scss' scoped>
.userManage {
  .top {
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    height: 70px;
    .el-button {
      float: right;
      margin-left: 10px;
    }
  }
}
</style>

<template>
  <div class="userManage">
    <div class="top">
      <el-button type="success" @click="daochu">excel导出</el-button>
      <el-button type="primary" @click="handleClickUpload">excel导入</el-button>
    </div>
    <my-table
      :tableData="tableData"
      :tablelist="tablelist"
      :pager="pager"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></my-table>
    <my-loanding
      :loadingdata="loadingdata"
      @handelloandbutton="handelloandbutton"
    ></my-loanding>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import { export_json_to_excel } from "../../vendor/Export2Excel";

import MyTable from "../../components/child/MyTable.vue";
import { userManageData } from "../../type/userManage";
import UserManageModel from "../../api/userManage";
import MyLoanding from "../../components/child/MyLoanding.vue";
import { useRouter } from "vue-router";
export default defineComponent({
  components: { MyTable, MyLoanding },
  setup() {
    const router = useRouter();
    const data = reactive(new userManageData());
    onMounted(() => {
      getusermanagelist();
    });
    // 页
    const handleSizeChange = (size: number) => {
      data.pager.pageSize = size;
      getusermanagelist();
    };
    // 条
    const handleCurrentChange = (page: number) => {
      data.pager.currentPage = page;
      getusermanagelist();
    };
    const handleOpenDialog = () => {
      data.loadingdata.dialogFormVisible = true;
      data.loadingdata.title = "导出为 excel";
    };
    const daochu = () => {
      handleOpenDialog();
    };
    const getusermanagelist = async () => {
      const response = await UserManageModel.getusermanagelist(
        data.pager.currentPage,
        data.pager.pageSize
      );
      if (response.data.code == 200) {
        const { list, total } = response.data.data;
        data.tableData = list;
        data.pager.total = total;
        console.log(
          "🚀 ~ file: index.vue ~ line 39 ~ getusermanagelist ~  data.tableData",
          data.tableData
        );
      }
    };
    const handelloandbutton = async (action) => {
      if (action == "no") {
        data.loadingdata.dialogFormVisible = false;
      } else {
        console.log(1);
        try {
          // const result = await getusermanagelist({
          //   page: data.pager.pageSize,
          //   size: 999,
          // });
          // excelTableData.value = result.list;

          // 引入文件
          // 表头
          const tHeader = ["姓名", "联系方式", "开通时间"];
          // table表格中对应的属性名
          const filterVal = ["username", "mobile", "openTime"];
          // 表格绑定数据转json
          const data = formatJson(filterVal, data.tableData);
          export_json_to_excel(
            tHeader,
            data,
            "部门登陆信息" + new Date().toLocaleDateString()
          ); // 对应下载文件的名字
        } catch (error) {
          console.log(error);
        }
      }
    };
    const handleClickUpload = () => {
      router.push("/upload");
    };
    return {
      ...toRefs(data),
      handleSizeChange,
      handleCurrentChange,
      daochu,
      handelloandbutton,
      handleClickUpload,
    };
  },
});
</script>
